<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<div id="box" style="background: red;" class="box2" name="111" huoying="222">
		<h1>div子元素</h1>
	</div>
	<script type="text/javascript">
		/*
			DOM: document object Model 文档，对象，模型

			1.dom是html的标准模型，通过它，js可以访问和改变html文档里所有元素
			2.dom树
				dom节点对象：
					1.文档节点 document
					2.元素节点 html元素  div  a元素
					3.属性节点 标签属性 href src alt title...
					4.文本节点 标签里的文字内容 （换行 空格都属于文本）

		*/
		//1.文档节点 document 浏览器在加载页面的时候，会给网页document对象
		//所有节点都是document对象的子节点
		console.log(document)
		console.dir(document)

		//2.元素节点 html元素  div  a元素
		//通过id获取元素节点
		let box = document.getElementById("box")
		console.log(box)

		//3.属性节点 标签属性 href src alt title...
		// -1 元素节点.属性名 有缺点 类似name属性的无法获取
		// -2 元素节点.getAttribute("属性名")
		console.log(box.style)
		//获取类名
		console.log(box.className)
		//获取id 
		console.log(box.id)
		console.log(box.name)//undefined
		console.log(box.huoying)//undefined

		console.log(box.getAttribute("name"))//111
		console.log(box.getAttribute("huoying"))//222

		//4.文本节点 标签里的文字内容 （换行 空格都属于文本）
		// innerText纯文本
		// innerHTML能识别html
		console.log(box.innerText)//div的子元素
		console.log(box.innerHTML)// <h1>div子元素</h1>

		//修改文本节点
		box.innerText = "今日阳光明媚"
		box.innerText = "<h1>今日阳光明媚</h1>"
		box.innerHTML = "<h1 style='color:white;'>今日阳光明媚</h1>"
	</script>
</body>
</html>